<template>
  <div class="student">
    <h2>我是Student组件</h2>
    <ul>
      <li>学生姓名:{{ name }}</li>
      <li>学生年龄:{{ age }}</li>
    </ul>
    <hr />
    <h3>我收到的数据</h3>
    <button @click="money2++">孩子赚钱啦</button>

    <ul>
      <li>消息:{{ msg }}</li>
      <li>钱:{{ money2 }}</li>
      <li>车名:{{ car.name }}</li>
      <li>车名:{{ car.price }}</li>
      <li>车名:{{ car.age }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Student",
  // FIXME: 第一种方式
  // props:['msg','money','car'],

  // 第二种方式
  props: {
    msg: String,
    money: Number,
    car: Object,
  },

  data() {
    return {
      name: "佩奇",
      age: 18,
      money2: this.money,
    };
  },
};
</script>

<style scoped>
.student {
  background-color: rgb(93, 175, 230);
  padding: 20px;
}
</style>